import React, { useState } from 'react';
import { Input, Button, Form, message } from 'antd';
import axios from 'axios';
import { Modal } from 'antd';
import { Token } from '@mui/icons-material';

const PurchaseStock = () => {
  const [isBuying, setIsBuying] = useState(true);

  const handleBuyClick = () => {
    setIsBuying(true);
  };

  const handleSellClick = () => {
    setIsBuying(false);
  };

  const handleTransaction = async (values, type) => {
    // Dynamically set the URL based on the transaction type
    //const url = isBuying ? 'api/user/purchase_stock' : 'api/user/sell_stock';

    const data = {
      stock_code: values.stockCode,
      stock_amount: values.quantity,
      notes: values.notes || ""
    };

    console.log("Value:", data);
    console.log("操作类型:", isBuying);

    let url = ''
    if (isBuying == true){
      url = '/api/user/purchase_stock'
    }else{
      url = '/api/user/sell_stock'
    }

    console.log("现在的url是:", url);

    try {
      const token = localStorage.getItem('token'); // 从localStorage获取token
      const response = await axios.post(url, data, { // 确保第二个参数是一个空对象，表示请求体
        headers: {
          Authorization: `Bearer ${token}`  // 在请求头中设置Authorization
        }
      });


      console.log(`${type} response:`, response.data);
      const ResultMessage = response.data.msg;
      message.success(ResultMessage);
    } catch (error) {
      console.error(`${type} error:`, error);
      //处理错误显示部分

      if (error.response && error.response.data && error.response.data.msg) {
        Modal.error({
          title: '操作错误',
          content: error.response.data.msg,
        });
      }
    }
  };

  const onFinish = (values) => {
    const transactionType = isBuying ? 'Buy' : 'Sell';
    handleTransaction(values, transactionType);
  };

  return (
    <div style={{ maxWidth: '500px', margin: '10px', float: 'left', padding: '20px' }}>
      <Button type="primary" onClick={handleBuyClick} style={{ marginRight: 10 }}>
        买入
      </Button>
      <Button type="primary" onClick={handleSellClick}>
        卖出
      </Button>
      <Form
        name="stockForm"
        layout="vertical"
        onFinish={onFinish}
        style={{ marginTop: 20 }}
      >
        <Form.Item
          label="股票代码"
          name="stockCode"
          rules={[{ required: true, message: '请输入股票代码!' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label={isBuying ? '买入数量' : '卖出数量'}
          name="quantity"
          rules={[{ required: true, message: '请输入数量!' }]}
        >
          <Input type="number" />
        </Form.Item>
        <Form.Item
          label="备注"
          name="notes"
        >
          <Input.TextArea maxLength={200} placeholder="添加交易备注（可选）" />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" style={{ backgroundColor: isBuying ? 'red' : 'blue', borderColor: isBuying ? 'red' : 'blue' }}>
            {isBuying ? '买入' : '卖出'}
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default PurchaseStock;





      //const response = await axios.post(url, data);
      // const token = localStorage.getItem('token'); // 从localStorage获取token
      // console.log("Token令牌是:", token);
      // const response = await axios.post('/api/user/purchase_stock', {
      //   headers: {
      //     Authorization: `Bearer ${token}`  // 在请求头中设置Authorization
      //   }
      // });





// import React, { useState } from 'react';
// import { Input, Button, Form } from 'antd';
// import axios from 'axios';  // 引入axios用于发送请求

// const PurchaseStock = () => {
//   const [isBuying, setIsBuying] = useState(true);

//   const handleBuyClick = () => {
//     setIsBuying(true);
//   };

//   const handleSellClick = () => {
//     setIsBuying(false);
//   };

//   const handleTransaction = async (values, type) => {
//     const url = `/user/purchase_stock`; // 

//     const data = {
//       stock_code: values.stockCode,
//       stock_amount: values.quantity,
//       notes: values.notes || ""  // 如果没有备注，默认为空字符串
//     };

//     console.log("Value:", data);

//     try {
//       const response = await axios.post(url, data);
//       console.log(`${type} response:`, response.data);
//     } catch (error) {
//       console.error(`${type} error:`, error);
//     }
//   };

//   const onFinish = (values) => {
//     const transactionType = isBuying ? 'Buy' : 'Sell';
//     handleTransaction(values, transactionType);
//   };

//   return (
//     <div style={{ maxWidth: '500px', margin: '10px', float: 'left', padding: '20px' }}>
//       <Button type="primary" onClick={handleBuyClick} style={{ marginRight: 10 }}>
//         买入
//       </Button>
//       <Button type="primary" onClick={handleSellClick}>
//         卖出
//       </Button>
//       <Form
//         name="stockForm"
//         layout="vertical"
//         onFinish={onFinish}
//         style={{ marginTop: 20 }}
//       >
//         <Form.Item
//           label="股票代码"
//           name="stockCode"
//           rules={[{ required: true, message: '请输入股票代码!' }]}
//         >
//           <Input />
//         </Form.Item>
//         <Form.Item
//           label={isBuying ? '买入数量' : '卖出数量'}
//           name="quantity"
//           rules={[{ required: true, message: '请输入数量!' }]}
//         >
//           <Input type="number" />
//         </Form.Item>
//         <Form.Item
//           label="备注"
//           name="notes"
//         >
//           <Input.TextArea maxLength={200} placeholder="添加交易备注（可选）" />
//         </Form.Item>
//         <Form.Item>
//           <Button type="primary" htmlType="submit" style={{ backgroundColor: isBuying ? 'red' : 'blue', borderColor: isBuying ? 'red' : 'blue' }}>
//             {isBuying ? '买入' : '卖出'}
//           </Button>
//         </Form.Item>
//       </Form>
//     </div>
//   );
// };

// export default PurchaseStock;


















// import React, { useState } from 'react';
// import { Input, Button, Form } from 'antd';
// import axios from 'axios';  // 引入axios用于发送请求

// const PurchaseStock = () => {
//   const [isBuying, setIsBuying] = useState(true);

//   const handleBuyClick = () => {
//     setIsBuying(true);
//   };

//   const handleSellClick = () => {
//     setIsBuying(false);
//   };

//   const handleBuy = async (values) => {
//     console.log('Buy Values:', values);
//     try {
//       const response = await axios.post('/api/buy', values);
//       console.log('Buy response:', response.data);
//     } catch (error) {
//       console.error('Buy error:', error);
//     }
//   };

//   const handleSell = async (values) => {
//     console.log('Sell Values:', values);
//     try {
//       const response = await axios.post('/api/sell', values);
//       console.log('Sell response:', response.data);
//     } catch (error) {
//       console.error('Sell error:', error);
//     }
//   };

//   const onFinish = (values) => {
//     if (isBuying) {
//       handleBuy(values);
//     } else {
//       handleSell(values);
//     }
//   };

//   return (
//     <div style={{ maxWidth: '500px', margin: '10px', float: 'left', padding: '20px' }}>
//       <Button type="primary" onClick={handleBuyClick} style={{ marginRight: 10 }}>
//         买入
//       </Button>
//       <Button type="primary" onClick={handleSellClick}>
//         卖出
//       </Button>
//       <Form
//         name="stockForm"
//         layout="vertical"
//         onFinish={onFinish}
//         style={{ marginTop: 20 }}
//       >
//         <Form.Item
//           label="股票代码"
//           name="stockCode"
//           rules={[{ required: true, message: '请输入股票代码!' }]}
//         >
//           <Input style={{ width: '100%' }} />
//         </Form.Item>
//         <Form.Item
//           label={isBuying ? '买入价格' : '卖出价格'}
//           name={isBuying ? 'buyPrice' : 'sellPrice'}
//           rules={[{ required: true, message: isBuying ? '请输入买入价格!' : '请输入卖出价格!' }]}
//         >
//           <Input style={{ width: '100%' }} />
//         </Form.Item>
//         <Form.Item
//           label={isBuying ? '买入数量' : '卖出数量'}
//           name={isBuying ? 'buyQuantity' : 'sellQuantity'}
//           rules={[{ required: true, message: isBuying ? '请输入买入数量!' : '请输入卖出数量!' }]}
//         >
//           <Input style={{ width: '100%' }} />
//         </Form.Item>
//         <Form.Item>
//           <Button type="primary" htmlType="submit" style={{ backgroundColor: isBuying ? 'red' : 'blue', borderColor: isBuying ? 'red' : 'blue' }}>
//             {isBuying ? '买入' : '卖出'}
//           </Button>
//         </Form.Item>
//       </Form>
//     </div>
//   );
// };

// export default PurchaseStock;









